import { useState } from "react";
import { Button, Image, Popover, List, Avatar } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { history } from "umi";

import { fetchOrderSubList, add, update, remove } from "@/api/order";
import moment from "moment";
import useAreaOrder from "@/hooks/useAreaOrder";

export default () => {
  const [areaName, setAreaName] = useState("");

  const columns = [
    {
      title: "订餐时间",
      dataIndex: "createTime",
      search: false,
      render: (_, record) => {
        return record?.dishOrder.createTime;
      },
    },
    {
      title: "截止时间",
      dataIndex: "endDate",
      search: false,
      render: (_, record) => {
        return record?.dishOrder.endDate;
      },
    },
    {
      title: "订餐时间段",
      search: false,
      render: (_, record) => {
        return (
          <>
            <span>{record?.dishOrder?.bookBreakfast === 1 ? "早饭" : ""} </span>
            <span>{record?.dishOrder?.bookLunch === 1 ? "午饭" : ""} </span>
            <span>{record?.dishOrder?.bookDinner === 1 ? "下午饭" : ""} </span>
          </>
        );
      },
    },
    {
      title: "拼单地址",
      dataIndex: "keyWord",
      hideInTable: true,
    },
    {
      title: "拼单地址",
      dataIndex: "address",
      search: false,
      render: (_, record) => {
        return `${record?.dishOrder?.areaName}${record?.dishOrder?.streetName}${record?.dishOrder?.address}`;
      },
    },
    {
      title: "会员信息",
      dataIndex: "people",
      search: false,
      render: (_, record) => {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <Avatar size={50} src={record.user?.avatar}></Avatar>
            <div style={{ marginLeft: 5 }}>
              <div>{record.user?.nickName}</div>
              <div>{record.user?.mobile}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: "是否预付",
      dataIndex: "pay",
      search: false,
    },
  ];

  return (
    <PageContainer>
      {useCommonTable({
        renderCustomContent: (actionRef) => {
          return useAreaOrder(
            {
              expiredWeekOrMonthDish: 1,
            },
            (item) => {
              setAreaName(item.areaName);
              actionRef?.current?.reload();
            }
          );
        },
        title: "订单",
        renderAdd: () => {},
        columns,
        modalWidth: 800,
        params: {
          areaName,
          expiredWeekOrMonthDish: 1,
        },
        fetchList: fetchOrderSubList,
        add,
        update,
        remove,
        actionColumnWidth: 100,
        showCheckbox: false,
        renderAction: (_, record) => {
          return (
            <Button type="primary" danger onClick={() => {}}>
              提前结束
            </Button>
          );
        },
      })}
    </PageContainer>
  );
};
